/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
axios({ url: 'https://hmajax.itheima.net/api/province' }).then(result => {
  // console.log(result.data.list);
  const pName = result.data.list.map(pname => {
    return `<option value="${pname}">${pname}</option>`
  }).join('')
  // console.log(pName);
  document.querySelector('.province').innerHTML = `<option value="">省份</option>` + pName
})
// 1.2
document.querySelector('.province').addEventListener('change', async e => {
  // console.log(e.target.value);
  const cName = await axios({ url: 'https://hmajax.itheima.net/api/city', params: { pname: e.target.value } })
  const objCname = cName.data.list.map(cname => {
    return `<option value="${cname}">${cname}</option>`
  }).join('')
  // console.log(objCname);
  document.querySelector('.city').innerHTML = ` <option value="">城市</option>` + objCname
  document.querySelector('.area').innerHTML = ` <option value="">地区</option>`
})
//1.3
document.querySelector('.city').addEventListener('change', async e => {
  // console.log(e.target.value);
  const result = await axios({ url: 'https://hmajax.itheima.net/api/area', params: { pname: document.querySelector('.province').value, cname: e.target.value } })
  // console.log(result);
  const areaStr = result.data.list.map(areaName => {
    return ` <option value="${areaName}">${areaName}</option>`
  }).join('')
  // console.log(areaStr);
  document.querySelector('.area').innerHTML = ` <option value="">地区</option>` + areaStr
})
//学习反馈
// document.querySelector('.submit').addEventListener('click', () => {
//   const form = document.querySelector('.info-form')
//   const data = serialize(form, { hash: true, empty: true })
//   console.log(data);
//   axios({ url: 'https://hmajax.itheima.net/api/feedback', method: 'POST', data }).then(result => {
//     console.log(result.data.message);
//     alert(result.data.message)
//   }).catch(error => {
//     console.dir(error);
//     alert(error.response.data.message)
//   })
// })
document.querySelector('.submit').addEventListener('click', async () => {
  const form = document.querySelector('.info-form')
  const data = serialize(form, { hash: true, empty: true })
  console.log(data);
  try {
    const result = await axios({ url: 'https://hmajax.itheima.net/api/feedback', method: 'post', data })
    console.log(result.data.message);
    alert(result.data.message)
  } catch (error) {
    console.dir(error.response.data.message)
    alert(error.response.data.message)
  }

})